﻿<cms-page-header cms-title="{{vm.page.pageRoute.fullUrlPath}}"
                 cms-parent-title="Pages"></cms-page-header>

<cms-form cms-name="mainForm"
          cms-edit-mode="vm.editMode"
          ng-submit="vm.save()"
          cms-loading="vm.formLoadState.isLoading">

    <!-- Default toolbar -->
    <cms-page-actions ng-show="!vm.editMode">
        <cms-button cms-text="Edit"
                    ng-if="::vm.canUpdate"
                    ng-click="vm.edit()"
                    ng-show="!vm.editMode"
                    ng-disabled="vm.globalLoadState.isLoading" class="main-cta"></cms-button>

        <cms-button-link cms-text="Browse to page"
                         cms-icon="eye-open"
                         cms-href="{{vm.page.pageRoute.fullUrlPath}}"
                         ng-if="vm.page.pageRoute.pageType == 'Generic'"></cms-button-link>

        <cms-button cms-text="Publish"
                    ng-click="vm.publish()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"
                    ng-if="(!vm.isMarkedPublished || vm.page.pageRoute.hasDraftVersion) && vm.canPublishPage"></cms-button>

        <cms-button cms-text="Unpublish"
                    ng-click="vm.unpublish()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"
                    ng-if="vm.isMarkedPublished && vm.canPublishPage"></cms-button>

        <cms-button cms-text="Change Url"
                    ng-if="::vm.canUpdatePageUrl"
                    ng-click="vm.changeUrl()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"></cms-button>

        <cms-button cms-text="Access Control"
                    ng-if="::vm.accessRulesEnabled"
                    ng-click="vm.viewAccessRules()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"></cms-button>

        <cms-button cms-text="Duplicate"
                    ng-if="::vm.canCreate"
                    ng-click="vm.duplicatePage()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"></cms-button>

        <cms-button cms-text="Delete"
                    ng-if="::vm.canDelete"
                    ng-click="vm.deletePage()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"></cms-button>
    </cms-page-actions>

    <!-- Edit mode toolbar -->
    <cms-page-actions ng-show="vm.editMode">

        <cms-button-submit cms-text="Save Draft"
                           cms-loading="vm.saveLoadState.isLoading"
                           ng-show="vm.editMode"
                           ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"></cms-button-submit>

        <cms-button cms-text="Save &amp; Publish"
                    cms-loading="vm.saveAndPublishLoadState.isLoading"
                    ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                    ng-click="vm.saveAndPublish()"></cms-button>

        <cms-button cms-text="Cancel"
                    ng-click="vm.cancel()"
                    ng-show="vm.editMode"
                    ng-disabled="vm.globalLoadState.isLoading"></cms-button>

    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <!-- UI feedback -->
        <cms-form-status></cms-form-status>

        <!-- Main -->
        <cms-form-section cms-title="Main">

            <cms-form-field-text cms-title="Title"
                                 cms-model="vm.updateDraftCommand.title"
                                 cms-description="A few words descriptive page title, e.g. 'About the team'. Google SERP typically shows 50-60 characters"
                                 required
                                 maxlength="300"></cms-form-field-text>

            <cms-form-field-readonly cms-title="Market"
                                     cms-model="vm.page.pageRoute.locale.ietfLanguageTag"></cms-form-field-readonly>

            <cms-form-field-container cms-title="Url">
                <a ng-href="{{vm.page.pageRoute.fullUrlPath}}"
                   ng-if="vm.page.pageRoute.pageType == 'Generic'">{{vm.page.pageRoute.fullUrlPath}}</a>
                <span ng-if="vm.page.pageRoute.pageType != 'Generic'">{{vm.page.pageRoute.fullUrlPath}}</span>
            </cms-form-field-container>

            <cms-form-field-readonly cms-title="Published Status"
                                     cms-model="vm.publishStatusLabel"></cms-form-field-readonly>

            <cms-form-field-container cms-title="Publish Date">
                <span ng-if="vm.page.pageRoute.publishDate">{{vm.page.pageRoute.publishDate | date:'fullDate'}} at {{vm.page.pageRoute.publishDate | date:'HH:mm:ss'}}</span>
                <span ng-if="!vm.page.pageRoute.publishDate">Not set</span>
            </cms-form-field-container>

            <cms-form-field-tags cms-title="CMS Tags"
                                 cms-model="vm.updatePageCommand.tags"></cms-form-field-tags>

        </cms-form-section>

        <!-- Meta data -->
        <cms-form-section cms-title="SEO">

            <cms-form-field-text-area cms-title="Meta Description"
                                      cms-model="vm.updateDraftCommand.metaDescription"
                                      cms-description="Ideally 25-250 characters. The Google SERP shows only the first 150 characters"
                                      rows="3"
                                      maxlength="300"></cms-form-field-text-area>

            <cms-form-field-text cms-title="OpenGraph Title"
                                 cms-model="vm.updateDraftCommand.openGraphTitle"
                                 maxlength="300"
                                 cms-description="Optional. The title that shows up when sharing the page on social media"></cms-form-field-text>

            <cms-form-field-text-area cms-title="OpenGraph Description"
                                      cms-model="vm.updateDraftCommand.openGraphDescription"
                                      cms-description="Optional. The description that shows up when sharing the page on social media"
                                      rows="3"></cms-form-field-text-area>

            <cms-form-field-image-asset cms-title="OpenGraph Image"
                                        cms-load-state="vm.saveLoadState"
                                        cms-asset="vm.page.latestVersion.openGraph.image"
                                        cms-model="vm.updateDraftCommand.openGraphImageId"
                                        cms-val-min-width="200"
                                        cms-val-min-height="200"
                                        cms-update-asset="true"
                                        cms-description="Optional. An image to show up when sharing the page on social media"></cms-form-field-image-asset>

            <cms-form-field-checkbox cms-title="Show in sitemap"
                                     cms-model="vm.updateDraftCommand.showInSiteMap"
                                     cms-description="Indicates whether this page should be included in the site map file used by search engine robots"></cms-form-field-checkbox>

        </cms-form-section>


        <cms-form-section cms-title="Template Content">

            <cms-form-section-actions>
                <cms-button-link cms-text="Manage in Visual Editor"
                    ng-if="vm.canUpdate && vm.page.latestVersion.regions.length && vm.page.pageRoute.pageType == 'Generic'"
                    cms-icon="eye-open"
                    ng-show="!vm.editMode"
                    cms-href="{{vm.urlLibrary.visualEditorForPage(vm.page.pageRoute, true)}}"></cms-button-link>
            </cms-form-section-actions>

            <div class="form-section-message" ng-if="!vm.page.latestVersion.regions.length">
                <p>This template has no managed content</p>
            </div>

            <div class="form-section-message" ng-if="vm.page.latestVersion.regions.length > 0 && vm.editMode">
                <p>Page content is edited in the visual editor.</p>
            </div>

            <cms-form-field-container>
                <cms-table-container ng-if="vm.page.latestVersion.regions.length > 0">

                    <table>
                        <tbody ng-repeat="region in vm.page.latestVersion.regions">
                            <tr>
                                <th colspan="2">
                                    <cms-table-group-heading>Region: {{region.name}}</cms-table-group-heading>
                                </th>
                            </tr>
                            <tr ng-if="!region.blocks.length">
                                <td colspan="2">No content</td>
                            </tr>
                            <tr ng-repeat="block in region.blocks">
                                <td>{{block.blockType.name}}</td>
                                <!--<td>{{block.blockType.description}}</td>-->
                                <td class="row-type" style="width:30px; text-align:center;">
                                    <!--TODO: Action-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </cms-table-container>
            </cms-form-field-container>
    </cms-form-section>

        <!-- Page versions -->
        <cms-form-section cms-title="Versions">
            <cms-form-field-container>
                <cms-table-container cms-loading="vm.versionsLoadState.isLoading">

                <table>
                    <thead>
                        <tr>
                            <th>Version</th>
                            <th>Created</th>
                            <th cms-table-column-actions ng-show="!vm.editMode">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="version in vm.versions.items">
                            <td>
                                {{::version.versionLabel}}
                            </td>
                            <td class="lowPriority">
                                <cms-table-cell-created-audit-data cms-audit-data="version.auditData"></cms-table-cell-created-audit-data>
                            </td>
                            <td cms-table-column-actions ng-show="!vm.editMode">
                                <span ng-if="version.workFlowStatus == 'Draft'">
                                    <span ng-if="vm.versions.items.length > 1 && vm.canUpdate">
                                        <a href=""
                                           class="btn-icon"
                                           title="Discard draft"
                                           ng-click="vm.loading || vm.discardDraft()">
                                            <i class="fa fa-trash-o"></i>
                                        </a>
                                    </span>
                                    <a href=""
                                       class="btn-icon"
                                       title="Publish"
                                       ng-if="vm.canPublishPage"
                                       ng-click="vm.loading || vm.publish(vm.pageId)">
                                        <i class="fa fa-cloud-upload"></i>
                                    </a>
                                </span>
                                <span ng-if="version.isLatestPublishedVersion">
                                    <a href=""
                                       class="btn-icon"
                                       title="Un-publish"
                                       ng-if="vm.isMarkedPublished && vm.canPublishPage"
                                       ng-click="vm.loading || vm.unpublish()">
                                        <i class="fa fa-cloud-download"></i>
                                    </a>
                                </span>
                                <span ng-if="!version.isLatestPublishedVersion && version.workFlowStatus == 'Published'">
                                    <a href=""
                                       class="btn-icon"
                                       title="Copy to draft"
                                       ng-if="vm.canUpdate"
                                       ng-click="vm.loading || vm.copyToDraft(version)">
                                        <i class="fa fa-files-o"></i>
                                    </a>
                                </span>
                                <a href="{{version.browseUrl}}"
                                   class="btn-icon"
                                   target="_blank"
                                   title="Browse to page: {{::version.versionLabel}}"
                                   ng-if="vm.page.pageRoute.pageType == 'Generic'">
                                    <i class="fa fa-external-link"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </cms-table-container>
                
                <cms-pager cms-result="vm.versions"
                            cms-query="vm.versionsQuery"></cms-pager>

            </cms-form-field-container>
        </cms-form-section>

        <!-- Audit data -->
        <cms-form-section-audit-data cms-audit-data="vm.page.auditData"></cms-form-section-audit-data>

</cms-page-body>

</cms-form>